import React from 'react';
import PubSub from 'pubsub-js'
import Img from './img'
import { Form, Input, Button, Select } from 'antd';
import 'antd/dist/antd.css'
import axios from 'axios'
// import { LoadingOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
// import reqwest from 'reqwest';
import { nanoid } from 'nanoid';
const { Option } = Select;
export default class Avatar extends React.Component {
    state = {
        typeone:[],
        typetwo:[],
        link: []
    }
    a = (link) => {
        // let formData = new FormData
        // link.forEach((file, index) => {
        //     formData.append("imgs", file);
        // });
        this.setState({ link: link })
    }
    componentDidMount() {
        axios.get("http://localhost:3001/api/fenleione").then((req, res) => {
            this.setState({
                typeone:req.data.type
            })
        })
    }
    onFinish = (obj) => {
        const { link } = this.state
        obj.imgs = link
        obj.token = localStorage.getItem("token")
        const formData = new FormData();
        Object.keys(obj).forEach((key) => {
            if (obj[key] instanceof Array) {
                obj[key].forEach((item) => {
                    formData.append(key, item);
                });
                return;
            }
            formData.append(key, obj[key]);
        });
        axios.post("http://localhost:3001/api/goodsimgadd", formData).then((res) => {
            if (res.data.code == 1) {
                PubSub.publish('arguigu', { type: "success", name: "添加成功", display: "flex" })
                this.props.gengxin()
                setTimeout(() => {
                    PubSub.publish('arguigu', { display: "none" })
                }, 1500)
            } else {
                PubSub.publish('arguigu', { type: "error", name: "添加失败", display: "flex" })
                setTimeout(() => {
                    PubSub.publish('arguigu', { display: "none" })
                }, 1500)
            }
        })

        // console.log('Success:', values);
    };
    onFinishFailed = (errorInfo) => {
        // console.log('Failed:', errorInfo);
    };
    handleChange(value) {
        // console.log(value);
        axios.get("http://localhost:3001/api/typetwo", {params:{
            type:value
        }}).then((req, res) => {
            this.setState({typetwo:req.data.type})
            // console.log(req.data.type);
        })
    }
    handleChanges(){}
    render() {
        const { onFinish, onFinishFailed } = this
        const { link ,typeone,typetwo} = this.state
        console.log(typetwo);

        const zhuangtai = link.length == 0 ? true : false
        return (
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="名称"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '请输入商品名称',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="价格"
                    name="price"
                    rules={[
                        {
                            required: true,
                            message: '请输入商品价格',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label="一级分类"  name="typeone"  rules={[
                        {
                            required: true,
                            message: '请输入商品一级分类',
                        },
                    ]}>
                    <Select style={{ width: 120 }} onChange={(value)=>this.handleChange(value)}>
                    {typeone.map((i)=>{
                        return ( <Option key={nanoid()} value={i}>{i}</Option>)
                    })}
                    </Select>
                </Form.Item>
                <Form.Item label="二级分类"   name="typetwo"  rules={[
                        {
                            required: true,
                            message: '请输入商品二级分类',
                        },
                    ]}>
                    <Select  style={{ width: 120 }} onChange={this.handleChanges}>
                       {typetwo.map((i)=>{
                        return ( <Option key={nanoid()} value={i}>{i}</Option>)
                       })}
                    </Select>
                </Form.Item>
                <Form.Item
                    label="商品图片"
                    name="imgs"
                    rules={[
                        {
                            required: zhuangtai,
                            message: '请添加商品图片',
                        },
                    ]}>
                    <Img a={this.a} />

                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >

                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>

        );
    }
}

